// 导入React的useEffect和useState钩子
import { useEffect, useRef } from "react";
// 导入Ant Design的Input和message组件
// 导入自定义的useStore钩子
import { useStore } from "@/store";
// 导入React Router的useLocation和useNavigate钩子
import { useLocation, useNavigate } from "react-router-dom";
// 导入自定义的putRequest函数
// 导入自定义的SessionStorageService服务
// 导入Arco Design的Button、Drawer、Dropdown、Menu组件
// import { Button } from "@arco-design/web-react";
// 导入Arco Design的IconDown组件
// import { IconDown } from "@arco-design/web-react/icon";

// 导入自定义的TextModal、ImageModal、VideoModal和CodeModal组件

const PPTEditBlock = () => {
  const divRef = useRef(null);

  // 创建一个状态变量，用于控制模态框的显示与隐藏
  // 创建一个状态变量，用于存储输入框的值
  // 使用useNavigate钩子函数，用于导航到其他页面
  const navigate = useNavigate();
  // 使用useLocation钩子函数，获取当前页面的URL信息
  const { search } = useLocation();
  // 创建一个URLSearchParams对象，用于解析URL中的查询参数
  const params = new URLSearchParams(search);
  // 获取title和id的值
  const query = {
    title: params?.get("title") || "",
    id: params?.get("id") || "",
  };

  // 从useStore中解构出powerPointParId、powerPointParArr、powerPointArr、curpowerPointIndex、updatePowerPointIndex、modifyPowerPointTitle、powerPointTitle
  const { powerPointArr, curpowerPointIndex, updatePowerPointIndex } =
    useStore();
  // 定义visibleTextModal状态，初始值为false，用于控制文本模态框的显示与隐藏
  // 定义visibleImageModal状态，初始值为false，用于控制图片模态框的显示与隐藏
  // 定义visibleVideoModal状态，初始值为false，用于控制视频模态框的显示与隐藏
  // 定义visibleCodeModal状态，初始值为false，用于控制代码模态框的显示与隐藏
  // 定义isAdd状态，初始值为true，用于判断是添加还是修改

  // 处理左箭头事件
  const handleLeftArrow = () => {
    // 如果当前幻灯片索引为1，则返回
    if (curpowerPointIndex === 1) return;
    // 更新幻灯片索引
    updatePowerPointIndex(curpowerPointIndex - 1);
  };
  // 定义一个函数，用于处理右箭头按键事件
  const handleRightArrow = () => {
    // 如果当前幻灯片索引等于幻灯片数组长度，则返回
    if (curpowerPointIndex === powerPointArr.length) return;
    // 更新当前幻灯片索引为当前索引加1
    updatePowerPointIndex(curpowerPointIndex + 1);
  };

  // useEffect(() => {
  //   // 检查 ref 是否被正确附加以及元素是否存在
  //   if (divRef.current) {
  //     console.log("我聚焦啦");
  //     divRef.current.focus(); // 设置焦点
  //   }
  //   return () => {
  //     updatePowerPointIndex(curpowerPointIndex - 1);
  //     updatePowerPointIndex(curpowerPointIndex + 1);
  //   };
  // }, []);

  useEffect(() => {
    // 定义键盘事件处理函数
    const handleKeyDown = (event) => {
      switch (event.key) {
        case "ArrowLeft":
          handleLeftArrow();
          break;
        case "ArrowRight":
          handleRightArrow();
          break;
        default:
          break;
      }
    };
    // 添加键盘事件监听器
    window.addEventListener("keydown", handleKeyDown);
    // 返回一个清理函数，在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [curpowerPointIndex,powerPointArr?.length]); // 空数组作为依赖项，确保只在组件挂载和卸载时运行一次

  return (
    <div
      // 设置样式
      style={{
        // 设置显示方式为弹性布局
        display: "flex",
        // 设置垂直对齐方式为居中
        alignContent: "center",
        // 设置水平对齐方式为两端对齐
        justifyContent: "space-between",
        // 设置文字颜色为#6b7280
        color: "#6b7280",
        // 设置宽度为140
        width: "100%",
        // 设置上边距为4
        padding: 40,
        position: "fixed",
        top: "50%",
        transform: "translateY(-50%)",
      }}
      ref={divRef}
      tabIndex={0} // 确保该元素可聚焦
    >
      <div
        style={{
          fontSize: 22,
          cursor: "pointer",
          color: curpowerPointIndex === 1 ? "#bfbfbf" : "#1677ff",
        }}
        onClick={() => {
          if (curpowerPointIndex === 1) return;
          updatePowerPointIndex(curpowerPointIndex - 1);
        }}
      >
        {`<`}
      </div>
      <div
        style={{
          fontSize: 22,
          cursor: "pointer",
          color:
            curpowerPointIndex === powerPointArr.length ? "#bfbfbf" : "#1677ff",
        }}
        onClick={() => {
          if (curpowerPointIndex === powerPointArr.length) return;
          updatePowerPointIndex(curpowerPointIndex + 1);
        }}
      >
        {`>`}
      </div>
    </div>
  );
};

export default PPTEditBlock;
